import CommonHeader from '@/components/CommonHeader';
import SideBar from '@/components/SideBar';

import { CommonState } from '@/models/common';
import type { RootState } from '@/typting'; // 导入定义的类型
import { Layout } from 'antd';
import { ReactNode } from 'react';
import { useDispatch, useSelector } from 'umi';
import './BaseLayout.less';

const { Header, Sider, Content } = Layout;
interface Props {
  children?: ReactNode;
}

const BaseLayouts = (props: Props) => {
  const commonState: CommonState = useSelector((state: RootState) => state.common);
  const dispatch = useDispatch();

  // 改变侧边栏的宽度展示
  const changeCollapse = () => {
    dispatch({
      type: 'common/changeCollapse',
      payload: { collapse: !commonState.collapse },
    });
  };
  return (
    <Layout className="container">
      <SideBar collapse={commonState.collapse} />
      <Layout>
        <CommonHeader collapse={commonState.collapse} changeCollapse={changeCollapse}></CommonHeader>
        <Content className="main-content">{props.children}</Content>
      </Layout>
    </Layout>
  );
};
export default BaseLayouts;
